เป็น Counter และ User Online แบบที่ผมใช้กับเว็บนี้ การนำ AJAX มาใช้กับ Counter นี้ ก็เพื่อให้การปรับปรุง สถานะคนเยี่ยมชม บนเว็บไซต์ อัปเดทอยู่ตลอดเวลา แม้ว่าเราจะเปิดหน้าเพจ ทิ้งไว้เฉยๆ ก็ตาม ซึ่งเป็นการแสดงสถานะ แบบ Real Time จริงๆ โดยการใช้เทคนิค Auto Refresh 
  
มาดูการทำงานของ Counter กันเลยครับ

ไฟล์ countermodule.php เป็นไฟล์หลักของ counter

<?
  //----------------------------------------------------------------------------------
  //ความแตกต่างของเวลา เป็น ชม. ที่เกิดจาก server ไม่ได้อยู่ในประเทศไทย
  $counter_hour=+0;
  //mode ของ counter 0=อัปเดททุกครั้งที่เรียก, 1=อัปเดท 1 IP ต่อ 1 วัน
  $counter_mode=1;
  //จำนวนหลักของ counter
  $counter_digit=5;
  //กำหนด เวลาการปรับปรุง counter 1000=1 วินาที
  $counter_refresh=10000;
  //-----------------------------------------------------------------------------------

  ในส่วนนี้ จะเป็นการกำหนดค่าเบื้องต้นของระบบ ที่จะใช้ในโปรแกรม
  
  //ไฟล์ที่ต้องใช้
  $counter_dir=dirname(__FILE__);
  $f1="$counter_dir/counter.dat"; //สำหรับเก็บ counter
  $f2="$counter_dir/useronline.dat"; //ไฟล์ counter.php
  $f3="$counter_dir/referer.dat"; //สำหรับเก็บ referer
  $counter_dir=basename($counter_dir);
  $f4="$counter_dir/counter.php"; //ไฟล์ counter.php
  $f5="$counter_dir/counterstatus.php"; //ไฟล์ counterstaus.php

  //อ่านค่าที่จำเป็น
  $my_referer=$_SERVER["HTTP_REFERER]; //เรียกมาจากไซต์
  $my_ip=$_SERVER["REMOTE_ADDR]; //IP ของผู้เรียก
  $counter_today=(int)date("d", mktime(date("H")+$counter_hour)); //วันนี้ ทดเวลาไป+$counter_hour
?>

ในส่วนนี้จะเป็นค่าเบื้องต้นที่อ่านได้ อันได้แก่ไฟล์ต่าง IP และ Referer และ วันที่ของผู้เรียก
  

<?
  //อ่านข้อมูลล่าสุดจาก counter.dat
  //ข้อมูลใน counter.dat
  //counttoday|counter
  //date
  
  if (file_exists($f1)) {
    $fr=file($f1); //อ่านข้อมูลจากไฟล์ลงบน array (เป็นบรรทัด)
    $dats=explode("|", $fr[0]); //บรรทัดแรกเป็นรายการ counter
    $counttoday=(int)$dats[0];
    $counter=(int)$dats[1];
    $newday=((int)$fr[1]!=$counter_today); //true ถ้าเป็นวันใหม่
  } else {
    $counttoday=0;
    $counter=0;
    $newday=true;
  }
  
  //อ่านค่าจากไฟล์ referrer.dat
  //และบันทึกรายการล่าสุดลงไฟล์
  // ip|referrer|user
  $visited=false;
  if ($newday || !file_exists($f3)) { //วันใหม่ หรือไม่มีไฟล์ referrer.dat
    $f=fopen ($f3, "w"); //สร้างไฟล์ referrer.dat ใหม่
  } else {
    $fr=file($f3); //อ่านข้อมูลจากไฟล์ลงบน array (เป็นบรรทัด)
    for ($i=0; $i<count($fr) & $visited==false; $i++) {
      $dats=explode("|", $fr[$i]);
      $visited=($dats[0]==$my_ip);
    }
    $f=fopen ($f3, "a"); //เปิดไฟล์ referrer.dat เพื่อเขียนต่อ
  }
  //เขียน referrer ล่าสุดลงบนไฟล์ referrer.dat
  fputs ($f, "$my_ip|$my_referer|$user ");
  fclose($f);

  if ($newday || !file_exists($f2)) {
    $f=fopen ($f2, "w"); //สร้างไฟล์ useronline.dat ใหม่
    fclose($f);
    $counttoday=0;
  }
  
  if ($counter_mode==0 || $visited==false) {
    $counttoday++;
    $counter++;
  }

  if ($visited==false || !file_exists($f1) || $counter_mode==0) {
    $f=fopen ($f1, "w"); //เขียนไฟล์ counter.dat ใหม่
    fputs ($f, "$counttoday|$counter ");
    fputs ($f, "$counter_today");
    fclose($f);
  }
?>

ในส่วนต่างๆ เหล่านี้จะเป็นการอ่านข้อมูลออกมา เพื่อนับจำนวนคน Online อ่าน Counter และบันทึก ชื่อ IP และ Referer ของผู้เรียกลงบนฐานข้อมูล รวมถึงการบันทึก referer เพื่อทำรายงาน คนเยี่ยมชม ว่าลิงค์มาจากที่ใดบ้าง
  

<?
  //แสดงผล counter ปรับเปลี่ยนหน้าตาได้ที่ skin.php
  include("skin.php");
?>

ในส่วนต่างๆ ต่อไปนี้ จะเป็นการทำงานของ AJAX เพิ่อ เรียกไฟล์ counter.php มาทำงาน

<script language=JavaScript>
var req

function refresh_counter() {
  req = Inint_AJAX();
  var user=document.getElementById("login_name").innerHTML;
  req.open('GET', '<?="$f4?ip=$my_ip&user="?>'+user);
  req.onreadystatechange = counterCallback;
  req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // set Header
  req.send(null);
}

function formatstr(val) {
  var ret='';
  for (i=0; i<<?=$counter_digit?>-val.length; i++) {
    ret=ret+'0';
  }
  return ret+val;
}

function counterCallback() {
  if (req.readyState==4) {
    if (req.status==200) {
      var data=req.responseText;
      var datas=data.split("|");
      document.getElementById("counttoday").innerHTML=formatstr(datas[0]); //counttoday
      document.getElementById("counter").innerHTML=formatstr(datas[1]); //counter
      document.getElementById("useronline").innerHTML=datas[2]; //useronline
      document.getElementById("users").innerHTML=datas[3]; //user
      setTimeout("refresh_counter()", "<?=$counter_refresh?>"); //Auto Refresh
    }
  }
}

//เริ่มการทำงานครั้งแรก
refresh_counter();
</script>

การนำไปใช้งานหรือทดสอบ ให้ปรับ chmod ไดเร็คทอรี่ counter/ (ไดเร็คทอรี่ของ counter) ให้เป็น 777 ด้วย และโปรแกรมจะทำการสร้างไฟล์ที่เหลือให้เอง โดยอัตโนมัติ หลังจากเรียกใช้ 

การใช้งานให้พิมพ์ <?include("path/to/countermodule.php");?> ลงในส่วนที่ต้องการ แสดงผล และ สามารถปรับแต่งรูปแบบการแสดงผลได้ที่ skin.php

ดูโค้ด ส่วนที่เหลือได้ในไฟล์ที่ดาวน์โหลดเลยนะครับ


มีคำถามว่าแล้วจะรู้ได้ไงว่ามีใคร online บ้าง

ตอบ การจะรู้ได้ว่าใคร online หรือไม่ เราต้องมีระบบสมาชิกครับ และสมาชิกต้องทำการ login ก่อนครับ เมื่อใดก็ตามที่สมาชิกท่านนั้นทำการ login แล้วให้ไปเปลี่ยนชื่อ guest ใน <div id=login_name style="visibility:hidden">guest</div> (อยู่ที่หน้า skin.php) ให้เป็นชื่อสมาชิก นั้นๆ counter จะนำชื่อไปแสดงคน online เองครับ

การเปลี่ยนชื่อ กระทำได้ 2 กรณีคือ ใส่ชื่อลงไปแทนที่ guest เลยตอนโหลด เช่น เปลี่ยนโค้ดที่หน้า skin.php ให้เป็น

<div id=login_name style="visibility:hidden">ชื่อ user</div> ชื่อ user อาจเป็นตัวแปรก็ได้ครับ

หรือใช้ javascript เปลี่ยนครับ ซึ่งจะเปลี่ยนในตอนที่ login(ด้วย AJAX) แล้วก็ได้

document.getElementById("login_name").innerHTML="ชื่อ user";